<template>
  <view class="detail">
    <img
      @click="back"
      class="back"
      src="@/assets/images/common/back-icon.png"
    />
    <img class="poster" src="@/assets/images/item.jpg" />
    <view class="content">
      <view class="brief flex">
        <img class="brief-poster" src="@/assets/images/item.jpg" />
        <view class="brief-content">
          <view class="title ellipsis deep-dark">
            分手的决心分手的决心分手的决心分手的决心分手的决心分手的决心分手的决心分手的决心分手的决心
          </view>
          <view class="tags">
            <text class="tag">豪门虐恋</text>
            <text class="tag">豪门虐恋</text>
            <text class="tag">豪门虐恋</text>
            <text class="tag">豪门虐恋</text>
            <text class="tag">豪门虐恋</text>
          </view>
        </view>
      </view>
      <view id="brief-des" class="brief-des gray">
        <openText :text="des" :lines="3" />
      </view>
      <view class="episode">
        <view class="top flex flex-bt flex-a-c">
          <text class="deep-dark">选集观看</text>
          <img src="@/assets/images/common/chase-btn-bg.png" />
        </view>
        <!-- <u-sticky bgColor="#fff"> -->
        <u-tabs
          class="episode-tabs"
          :list="episodeList"
          :current="current"
          @click="selectItem"
          :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1)',
          }"
          :inactiveStyle="{
            color: '#757575',
          }"
          :lineColor="'transparent'"
          itemStyle="margin-right:10px;padding-left: 12px; padding-right: 12px; height: 34px;background-color:#F7FAFA"
        ></u-tabs>
        <!-- </u-sticky> -->
      </view>
      <view class="list">
        <card1 class="card" :status="1"/>
        <card1 v-for="i in 20" :key="i" class="card"/>
      </view>
    </view>
    <view v-if="showWatchTip" class="watch-tip flex flex-bt flex-a-c">
      <view class="flex flex-a-c">
          <img @click="closeWatchTip" class="close" src="@/assets/images/common/close-gray.png" />
          <text>观看至第2集</text>
          <img class="watch" src="@/assets/images/common/watching-icon.png" />
      </view>
      <view class="btn flex flex-a-c">
          <img class="pause" src="@/assets/images/common/pause-white.png" />
          <text>继续观看</text>
      </view>
    </view>
  </view>
</template>
<script>
import card1 from '../../components/theater/card1.vue';
import openText from '../../components/openText/index'
export default {
    components:{
        card1,
        openText
    },
  data() {
    return {
      info: {},
      episodeList: [...new Array(20).keys()].map((item,index)=>{
        return{
            name:`${index*10 + 1}-${(index+1)*10}`
        }
      }),
      current: 0,
      showWatchTip:false,
      textHeight:0,//文本高度
      lineHeight:0,//单行文本高度
      des:'在山区调查一起谋杀案的海俊遇到了死者的妻子瑞莱，瑞莱对丈夫的死没有表现出任何激动的迹象，并且她的行为与悲伤的亲戚大相径庭。在山区调查一起谋杀案的海俊遇到了死者的妻子瑞莱，瑞莱对丈夫的死没有表现出任何激动的迹象，并且她的行为与悲伤的亲戚大相径庭。'
    };
  },
  onLoad() {
    setTimeout(() => {
        this.showWatchTip = true;
    }, 5000);
    
  },
  computed: {
    //文本所占总行数
    lines() {
        let line = Math.floor(this.textHeight > 0 && this.lineHeight > 0 ? this.textHeight / this.lineHeight : 0)
        return line
    }
},
  methods: {
    back() {
      uni.navigateBack({ delta: 1 });
    },
    selectItem(item) {
      console.log(item);
    },
    closeWatchTip(){
        this.showWatchTip = false;
    },
    
  },
  mounted(){
  }
};
</script>
<style lang="scss" scoped>
.detail {
  .back {
    position: absolute;
    top: 102rpx;
    left: 34rpx;
    width: 62rpx;
    height: 62rpx;
  }
}
.poster {
  width: 100%;
  height: 750rpx;
  object-fit: cover;
}
.content {
    position: relative;
  margin-top: -282rpx;
  background-color: #fff;
  z-index: 3;
  border-radius: 25rpx 25rpx 0rpx 0rpx;
  padding: 31rpx;
  box-sizing: border-box;
  .brief {
    &-poster {
      width: 179rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      height: 238rpx;
      position: relative;
      top: -77rpx;
      margin-right: 20rpx;
    }
    &-content {
      flex: 1;
      width: calc(100% - 202rpx);
      flex-shrink: 0;
      .title {
        -webkit-line-clamp: 2;
        line-height: 46rpx;
        font-size: 38rpx;
        margin-bottom: 15rpx;
      }
      .tags {
        overflow-x: auto;
        white-space: nowrap;
      }
      .tag {
        font-size: 23rpx;
        color: #757575;
        white-space: nowrap;
        background: #f7fafa;
        border-radius: 8rpx;
        margin-right: 12rpx;
        padding: 7rpx 15rpx;
      }
    }
  }
  .brief-des {
    font-size: 27rpx;
    line-height: 40rpx;
    margin-top: -54rpx;
  }
  .episode {
    margin-top: 44rpx;
    .top {
      .deep-dark {
        font-size: 35rpx;
      }
      img {
        width: 150rpx;
        height:auto;
      }
    }
    .episode-tabs {
        margin-top: 30rpx;
        padding-bottom: 30rpx;
      .u-tabs__wrapper__nav__line {
        display: none;
      }
    }
  }
  .list{
    .card{
        margin-bottom: 30rpx;
    }
  }
}
.watch-tip{
  position: fixed;
  z-index:3;
  bottom:50rpx;
  background-color:#182223;
  border-radius:25rpx;
  width:calc(100% - 62rpx);
  left:31rpx;
  color:#58DEE3;
  padding:31rpx;
  box-sizing: border-box;
  font-size:27rpx;
  line-height:1;
  .close{
    width:31rpx;
    margin-right:31rpx;
  }
  .watch{
    width:31rpx;
    margin-left:25rpx;
  }
  .btn{
    background:linear-gradient(135deg,#48D8DE 0%,#42D3B9 50%,#B3E562 100%);
    color:#fff;
    padding:0 31rpx;
    border-radius:62rpx;
    height:62rpx;
    img{
        width:31rpx;
        margin-right:8rpx;
    }
  }
}
</style>
